// 清除浮动
.clearfix() {
  &::before,
  &::after {
    content: '';
    display: table;
  }
  
  &::after {
    clear: both;
  }
}

// 文本溢出省略号
.text-ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.text-ellipsis-multiline(@lines: 2) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: @lines;
  -webkit-box-orient: vertical;
}

// 禁用状态
.disabled() {
  cursor: not-allowed;
  opacity: 0.6;
  
  &:hover,
  &:focus {
    opacity: 0.6;
  }
}

// 按钮样式混入
.button-size(@padding-vertical; @padding-horizontal; @font-size; @border-radius) {
  padding: @padding-vertical @padding-horizontal;
  font-size: @font-size;
  border-radius: @border-radius;
}

.button-variant(@color; @background; @border) {
  color: @color;
  background-color: @background;
  border-color: @border;

  &:hover,
  &:focus {
    background-color: darken(@background, 8%);
    border-color: darken(@border, 8%);
  }

  &:active {
    background-color: darken(@background, 12%);
    border-color: darken(@border, 12%);
  }

  &.disabled,
  &[disabled] {
    .button-variant-disabled();
  }
}

.button-variant-disabled() {
  .disabled();
  color: @text-color-disabled;
  background-color: @bg-color-component;
  border-color: @border-color;
}

// 响应式断点
@breakpoint-xs: 480px;
@breakpoint-sm: 576px;
@breakpoint-md: 768px;
@breakpoint-lg: 992px;
@breakpoint-xl: 1200px;

.respond-to(@device, @rules) {
  & when (@device = xs) {
    @media (max-width: @breakpoint-xs) { @rules(); }
  }
  
  & when (@device = sm) {
    @media (max-width: @breakpoint-sm) { @rules(); }
  }
  
  & when (@device = md) {
    @media (max-width: @breakpoint-md) { @rules(); }
  }
  
  & when (@device = lg) {
    @media (max-width: @breakpoint-lg) { @rules(); }
  }
  
  & when (@device = xl) {
    @media (max-width: @breakpoint-xl) { @rules(); }
  }
}